<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-section">
			<view class="user-info-box">
				<image class="portrait" :src="userInfo.avatar || '/static/missing-face.png'" @click="toLogin"></image>
				<view class="info-box">
					<text class="username" @click="toLogin">{{isLogin ? userInfo.nickname : '点击登录'}}</text>
					<text class="bio" v-if="isLogin">{{userInfo.bio || '这个人很懒，没有签名~'}}</text>
				</view>
			</view>
		</view>

		<!-- 用户数据统计 -->
		<view class="stats-section">
			<view class="stats-box">
				<text class="stats-value">{{userStats.follows || 0}}</text>
				<text class="stats-label">关注</text>
			</view>
			<view class="stats-box">
				<text class="stats-value">{{userStats.fans || 0}}</text>
				<text class="stats-label">粉丝</text>
			</view>
			<view class="stats-box">
				<text class="stats-value">{{userStats.likes || 0}}</text>
				<text class="stats-label">获赞</text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view 
				v-for="(item, index) in menuList" 
				:key="index"
				:class="['menu-item', item.type === 'divider' ? 'divider' : '']"
				@click="handleMenuClick(item)"
			>
				<template v-if="item.type !== 'divider'">
					<view class="menu-item-content">
						<uni-icons :type="item.icon" size="24" color="#666"></uni-icons>
						<text :class="['menu-text', item.type === 'logout' ? 'logout' : '']">{{item.text}}</text>
					</view>
					<uni-icons type="right" size="16" color="#ccc"></uni-icons>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {},
				userStats: {},
				menuList: [
					{ icon: 'calendar', text: '浏览记录', path: '/pages/user/browse-history' },
					{ icon: 'shop', text: '我的订单', path: '/pages/user/orders' },
					{ icon: 'shop', text: '优惠券', path: '/pages/user/coupons' },
					{ icon: 'star', text: '我的收藏', path: '/pages/user/favorites' },
					{ icon: 'help', text: '客服帮助', path: '/pages/user/help' },
					{ type: 'divider' },
					{ icon: 'person', text: '切换账号', type: 'switch' },
					{ icon: 'person', text: '退出登录', type: 'logout' }
				]
			}
		},
		
		onShow() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
				return
			}
			
			this.isLogin = true
			this.getUserInfo()
		},
		
		methods: {
			getUserInfo() {
				// TODO: 调用接口获取用户信息
				// 这里可以添加获取用户信息的逻辑
			},
			
			toLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			
			handleMenuClick(item) {
				if (item.type === 'divider') return
				
				if (item.type === 'logout') {
					this.handleLogout()
					return
				}
				
				if (item.type === 'switch') {
					this.switchAccount()
					return
				}
				
				if (!this.isLogin) {
					this.toLogin()
					return
				}
				uni.navigateTo({
					url: item.path
				})
			},
			
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('token')
							this.isLogin = false
							this.userInfo = {}
							this.userStats = {}
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
							uni.switchTab({
								url: '/pages/tabbar/tabbar-1/tabbar-1'
							})
						}
					}
				})
			},
			
			switchAccount() {
				uni.showModal({
					title: '提示',
					content: '确定要切换账号吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.user-section {
		background-color: #ffffff;
		padding: 30rpx;
		
		.user-info-box {
			display: flex;
			align-items: center;
			
			.portrait {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			
			.info-box {
				margin-left: 30rpx;
				
				.username {
					font-size: 32rpx;
					font-weight: bold;
				}
				
				.bio {
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}
		}
	}

	.stats-section {
		display: flex;
		background-color: #ffffff;
		padding: 20rpx 0;
		margin-top: 20rpx;
		
		.stats-box {
			flex: 1;
			text-align: center;
			
			.stats-value {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.stats-label {
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
			}
		}
	}

	.menu-section {
		margin-top: 20rpx;
		background-color: #ffffff;
		
		.menu-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			
			&.divider {
				height: 20rpx;
				background-color: #f8f8f8;
				padding: 0;
			}
			
			.menu-item-content {
				display: flex;
				align-items: center;
				
				.menu-text {
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #333;
					
					&.logout {
						color: #ff4d4f;
					}
				}
			}
		}
	}
</style>
